@extends('layouts.template')

@section('title', '管理后台')

@section('content')

    <script type="text/javascript" src="{{asset('js/My97DatePicker/WdatePicker.js')}}"></script>
    <script>

        $(function(){

            var form = new Vue({
                el:'#form',
                data:{
                    c_vaildtype:'{{$coupon_vaildtype_days}}',
                },
                computed:{
                },
                mounted:function(){
                },
                watch: {
                },
                methods:{
                },
                components:{
                }
            });

            var validator = $("#form").validate({
                rules: {
                    c_vaildtype:{
                        required:true,
                    },
                    c_name:{
                        required:true,
                        maxlength:10,
                    },
                    c_vaildday:{
                        required:function(){
                            return $('[name=c_vaildtype]:checked').val() == '{{$coupon_vaildtype_days}}';
                        },
                        digits:true,
                        min:1,
                    },
                    c_starttime:{
                        required:function(){
                            return $('[name=c_vaildtype]:checked').val() == '{{$coupon_vaildtype_period}}';
                        },
                        date:true
                    },
                    c_endtime:{
                        required:function(){
                            return $('[name=c_vaildtype]:checked').val() == '{{$coupon_vaildtype_period}}';
                        },
                        date:true
                    },
                    c_money:{
                        required:true,
                        number:true,
                        min:0,
                    },
                    c_fullmoney:{
                        required:true,
                        number:true,
                        min:0,
                    },
                    c_count:{
                        required:true,
                        digits:true,
                        min:1,
                    },
                    c_stoptime:{
                        required:true,
                        date:true
                    },
                },
                messages: {
                    c_vaildtype:{
                        required:'请选择一个使用类型',
                    },
                    c_name:{
                        required:'请输入优惠券名称',
                        maxlength:'优惠券名称请限制在10字以内',
                    },
                    c_vaildday:{
                        required:'请输入优惠券有效时间（天）',
                    },
                    c_starttime:{
                        required:'请选择开始时间'
                    },
                    c_endtime:{
                        required:'请选择结束时间'
                    },
                    c_money:{
                        required:'请输入优惠金额（元）'
                    },
                    c_fullmoney:{
                        required:'请输入满多少金额才可以使用（元）'
                    },
                    c_count:{
                        required:'请输入可发放领取优惠券总数量（张）'
                    },
                    c_stoptime:{
                        required:'请选择发放/领取结束时间'
                    },
                },
                submitHandler: function(form) {
                    form.submit();
                },
            });

        });

    </script>

    <div class="col-md-9">
        <form id="form" method="POST" action="" v-cloak>
            {{csrf_field()}}
            <div class="panel panel-default">
                <div class="panel-body">
                    <!-- 左侧表单 begin-->
                    <div class="col-md-8">
                        <div class="row">

                            <div class="form-group">
                                <label class="col-sm-4 control-label">使用类型： <span class="asterisk">*</span></label>
                                <div class="col-sm-4">
                                    <div class="radio"><label><input type="radio" name="c_vaildtype" value="{{$coupon_vaildtype_days}}" @click="c_vaildtype = '{{$coupon_vaildtype_days}}'" checked="checked"> 发放/领取后即可使用</label></div>
                                    <div class="radio"><label><input type="radio" name="c_vaildtype" value="{{$coupon_vaildtype_period}}" @click="c_vaildtype = '{{$coupon_vaildtype_period}}'"> 在活动期间才可以使用</label></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 control-label">优惠券名称： <span class="asterisk">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" name="c_name" class="form-control" required="required" placeholder="请输入优惠券名称（10字以内）">
                                </div>
                            </div>

                            <div class="form-group" v-show="c_vaildtype == '{{$coupon_vaildtype_days}}'">
                                <label class="col-sm-4 control-label">有效时间： <span class="asterisk">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" name="c_vaildday" class="form-control" required="required" placeholder="请输入优惠券有效时间（天）">
                                </div>
                            </div>

                            <div class="form-group" v-show="c_vaildtype == '{{$coupon_vaildtype_period}}'">
                                <label class="col-sm-4 control-label">有效时间： <span class="asterisk">*</span></label>
                                <div class="col-sm-4">
                                    <input type="text" name="c_starttime" class="form-control" required="required" placeholder="请选择开始时间" onclick="WdatePicker()">
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" name="c_endtime" class="form-control" required="required" placeholder="请选择结束时间" onclick="WdatePicker()">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 control-label">优惠券面额： <span class="asterisk">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" name="c_money" class="form-control" required="required" placeholder="请输入优惠金额（元）">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 control-label">使用条件： <span class="asterisk">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" name="c_fullmoney" class="form-control" required="required" placeholder="请输入满多少金额才可以使用（元）">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 control-label">优惠券数量： <span class="asterisk">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" name="c_count" class="form-control" required="required" placeholder="请输入可发放领取优惠券总数量（张）">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 control-label">发放/领取结束时间： <span class="asterisk">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" name="c_stoptime" class="form-control" required="required" placeholder="请选择结束时间" onclick="WdatePicker()">
                                </div>
                            </div>

                        </div><!-- row -->
                    </div>
                    <!-- 左侧表单 end-->
                </div><!-- panel-body -->
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-sm-9 col-sm-offset-3">
                            <button class="btn btn-primary mr5" type="submit">确定</button>
                        </div>
                    </div>
                </div><!-- panel-footer -->
            </div><!-- panel -->
        </form>
    </div>


@endsection

